
<template>
  <div class="index">

    <div class="center">
      <left></left>
      <div class="right">
        <top></top>
          <div class="hei10"></div>
          <div class="where" style="background: #fff; padding: 10px 30px; font-size: 14px; color: #595959;">
            当前位置：
            <router-link to="/index" style="color: #409eff;">分销后台</router-link>>
            <router-link to="/duanxin" style="color: #409eff;">短信中心</router-link>>
            短信充值
          </div>
           <div class="hei10"></div>
                <div class="conlist" v-loading='loading' style="padding: 20px;">

                  <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
                      <el-tab-pane label="短信充值" name="first">
                        <!-- <div class="addrenwutitle">短信充值</div> -->
                        <div class="list listth flex">
                            <div class="th">充值条数</div>
                            <div class="th">单价</div>
                            <div class="th">总金额</div>
                            <div class="th">操作</div>
                        </div>
                        <div class="list listtd flex" v-for="item in list" :key="item.id">
                            <div class="td">{{item.numbers}}条</div>
                            <div class="td">约{{item.priceone}}分/条</div>
                            <div class="td">{{item.price}}元</div>
                            <div class="td">
                              <el-button size="mini" type="primary" @click="chongzhic(item.id,item.numbers,item.price)">立即充值</el-button>
                            </div>
                        </div>
                      </el-tab-pane>
                      <el-tab-pane label="充值记录" name="second">
                        <div class="list listth flex">
                            <div class="th">充值ID</div>
                            <div class="th">充值金额</div>
                            <div class="th">充值条数</div>
                            <div class="th">充值方式</div>
                            <div class="th">付款时间</div>
                        </div>
                        <div class="list listtd flex" v-for="item in list2" :key="item.id">
                            <div class="td">{{item.id}}</div>
                            <div class="td">{{item.amount}}元</div>
                            <div class="td">{{item.numbers}}条</div>
                            <div class="td">{{item.pay_type}}</div>
                            <div class="td">{{item.pay_time}}</div>



                        </div>
                        <el-pagination style="text-align: right; padding: 20px;" background layout="total,prev, pager, next"
                          :current-page="page" @current-change="fanye" :page-size="pageSize" :total="total"></el-pagination>
                      </el-tab-pane>
                  </el-tabs>


                    <div class="flex" style="margin: 50px 100px; line-height: 36px;">
                      <el-checkbox v-model="yue">余额不足短信提醒</el-checkbox>
                      <el-input v-model="shoujihao" :disabled="shoujihaofix" placeholder="手机号" style="width: 300px; margin-right: 20px;"></el-input>
                      <el-button v-if="shoujihaofix == true" @click="shoujihaofix = false" size="medium">修改</el-button>
                      <el-button v-if="shoujihaofix == false" @click="save()" size="medium">保存</el-button>
                    </div>
                </div>
            </div>
        </div>
        <el-dialog title="充值短信" center :visible.sync="log" :close-on-click-modal="false" width="650px" :before-close="closelog">
            <el-form ref="form" @submit.native.prevent v-model="form" label-width="120px" class="form">
                <el-form-item label="充值金额：">{{chongzhi.qian}}元</el-form-item>
                <el-form-item label="充值数量：">{{chongzhi.tiao}}条</el-form-item>
                <el-form-item label="付款方式：">
                    <el-button size="medium" @click="chongzhi.type = 1">{{moban.platform_name}}账户余额</el-button>
                    <el-button size="medium" @click="weixinpay">微信支付（限500）</el-button>
                    <el-button size="medium" @click="zhifubaopay">支付宝支付</el-button>
                </el-form-item>
                <el-form-item label="当前账户余额：" v-if="chongzhi.type == 1">
                    {{money | qux}}元
                </el-form-item>
            </el-form>
            <div style="display: flex; justify-content: center; align-items: center;">
                <qrcode :value="er" id="canvas" :options="{ size: 200 }" v-if="er != '' && (chongzhi.type == 2 || chongzhi.type == 3)"></qrcode>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button type="danger" round v-if="chongzhi.type == 2 || chongzhi.type == 3" @click="fukuanok" >扫码付款完成</el-button>
                <el-button type="danger" round @click="close" >暂时不充了</el-button>
                <el-button type="danger" round v-if="chongzhi.type == 1" @click="chongzhile" >账户余额付款</el-button>
            </span>
        </el-dialog>
        <!-- <foot></foot> -->
    </div>

</template>

<script>
    import axios from 'axios'
    import top from '@/components/top.vue'
    import left from '@/components/left.vue'
    import foot from '@/components/foot.vue'
    import moment from "moment";
    import QRcode from '@xkeshi/vue-qrcode';
    import qu0 from "../../../public/qu0.js"
    export default {
        components: {
            "left": left,
            "top": top,
            "foot": foot,
            qrcode : QRcode
        },
        name: "duanxinchongzhi",
        data() {
            return {
              list2:[],
              activeName:"first",
                yue:false,
                shoujihao:"",
                shoujihaofix:false,
                loading:true,
                form:"",
                renwu:{
                  sendtime:"1",
                  waihu_status:"2",
                  tuikuan_status:"2",
                  shop_name:"2",
                  order_source:"2",
                  time:"",
                  name:"2",
                  qianming:"1",
                  content:"",
                },
                list:[],
                zishu:"67",
                tiaoshu:"1",
                mobile:"",
                mobilechecked:true,
                log:false,
                er:"",
                chongzhi:{
                  id:"",
                  qian:"",
                  tiao:"",
                  type:""
                },
                money:"",
                page:1,
                pageSize:20,
                total:0
            }
        },
        filters: {
            qux:function(dataStr){
                return qu0.qu0(dataStr)
            }
        },
        created() {
          this.getmobile()
          this.getmessage()
          this.getmoney()
          this.getlist2()
        },
        mounted() {

        },
        methods: {
          //余额充值
            chongzhile:function(){
              var that = this
              axios.post('/api/plan-market/message/fukuan',{id:this.chongzhi.id})
                  .then(response => {
                      if(response.data.msg.code != 0){
                          that.$message.error(response.data.msg.info);
                      }else{
                          that.$message.success("使用余额充值成功");
                          that.log = false
                          that.getmoney()
                      }
                  })
            },
            //获取钱
            getmoney:function(){
              var that = this
              axios.get('/api/gth/shop/balance')
                  .then(response => {
                      if(response.data.msg.code != 0){
                          that.$message.error(response.data.msg.info);
                      }else{
                          that.money = response.data.data.balance
                      }
                  })
            },
            closelog:function(){
              this.chongzhi.id =''
              this.chongzhi.qian =''
              this.chongzhi.tiao =''
              this.chongzhi.type =''
              this.log = false
            },
            getmessage:function(){
              var that = this
              axios.get('/api/plan-market/message/getmessagepackage')
                  .then(response => {
                      if(response.data.msg.code != 0){
                          that.$message.error(response.data.msg.info);
                      }else{
                          that.list = response.data.data
                          that.loading = false
                      }

                  })
            },
            getlist2:function(){
              var that = this
              axios.get('/api/plan-market/shop/sms/recharge/list?page='+this.page+'&pageSize='+this.pageSize)
                  .then(response => {
                      if(response.data.msg.code != 0){
                          that.$message.error(response.data.msg.info);
                      }else{
                          that.list2 = response.data.data.data
                          that.total = response.data.data.total
                      }
                  })
            },
            fanye: function(page) {
              this.page = page
              this.getlist2()
            },
            getmobile:function(){
              var that = this
              axios.get('/api/plan-market/shop/config/info')
                  .then(response => {
                      if(response.data.msg.code != 0){
                          that.$message.error(response.data.msg.info);
                      }else{
                          if(response.data.data.mobile == ''){

                          }else{
                             that.shoujihao = response.data.data.mobile
                             that.yue = true
                             that.shoujihaofix = true
                          }
                      }

                  })
            },
            save:function(){
                var that = this
                axios.post('/api/plan-market/shop/remind/config',{mobile:this.shoujihao})
                    .then(response => {
                            if(response.data.msg.code == 0){
                                that.$message({
                                    message: '保存成功！',
                                    type: 'success'
                                });
                                that.shoujihaofix = true
                            }else{
                                this.$message.error(response.data.msg.info);
                            }
                    })
            },
            weixinpay:function(){
              this.chongzhi.type = 2
              var that = this
              axios.post('/api/plan-market/shop/recharge2',{product_id:this.chongzhi.id,type:1})
                  .then(response => {
                      if(response.data.msg.code != 0){
                          that.$message.error(response.data.msg.info);
                      }else{
                          that.er = response.data.data.pay_info
                      }

                  })
            },
            zhifubaopay:function(){
              this.chongzhi.type = 3
              var that = this
              axios.post('/api/plan-market/shop/recharge2',{product_id:this.chongzhi.id,type:1,pay_way:1})
                  .then(response => {
                      if(response.data.msg.code != 0){
                          that.$message.error(response.data.msg.info);
                      }else{
                          that.er = response.data.data.pay_info
                      }

                  })
            },
            chongzhic:function(id,tiao,qian){
              this.log = true
              this.chongzhi.qian = qian
              this.chongzhi.tiao = tiao
              this.chongzhi.id = id

            },
            close:function(){
              this.log = false
            },
            fukuanok:function(){
              this.$router.push({
                path:'/duanxin/renwuguanli'
              })
            }
        }
    }
</script>

<style lang="scss" scoped>
    .index{
      /deep/ .el-button--danger {
          color: #FFF;
          background-color: #2974FF;
          border-color: #2974FF;
      }

      /deep/ .el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner{
        background-color: #2974FF  !important;
            border-color: #2974FF  !important;
      }
      /deep/ .el-checkbox__input.is-checked+.el-checkbox__label{
        color: #2974FF !important;
      }
      /deep/ .el-tabs--card>.el-tabs__header .el-tabs__item.is-active{
        color: #2974FF !important;
      }
              .conlist{ padding-bottom: 20px; background: #FFFFFF; min-height: 800px;
                .addrenwutitle{ text-align: center; line-height: 50px; font-weight: bold; font-size: 16px; border-bottom: 1px #EAEAEA solid; margin-bottom: 50px;}
                .list {
                	text-align: center; padding: 0 20px;
                	line-height: 60px;

                	.th {
                		flex: 1;
                		background: rgb(246, 246, 246);
                    color: rgb(86, 86, 86); font-size: 14px; line-height: 45px;
                	}

                	.td {
                		flex: 1;
                		border-bottom: 1px #EAEAEA solid;
                		height: 60px;
                    line-height: 60px;
                		overflow: hidden; font-size: 14px;
                	}
                }
                .flex{ display: flex;}
              }

    }
</style>
